// VanillaBootstrap theme template
// 
// Copy this file and name it to your liking. Then call it from within main.less AT THE BOTTOM like this:
//
// 		@import "../themes/your-name-here";
//
// You don't have to include the .less extension. When you've done this, simply customize the variables
// as you see fit and add any extra styles at the end of your new file. Using the variables below,
// you can change all colors within the Bootstrap framework. NB: You'll have to call it again once
// you update VanillaBootstrap.
//
// You can also base your theme on a Bootswatch. To do so, follow the instruction below and remember
// to delete or comment out all variables that you don't wish to alter, as these will otherwise
// override the variables of your chosen Bootswatch. Remember, this applies to Bootswatches called from
// within main.less too! If you call a Bootswatch from within main.less and use this template for your
// custom theme, then the variables set in your custom theme will override those of the Bootswatch.
//
// When you've customized everything to your liking, simply go visist your site and the LESS compiler
// will automatically compile and compress all your work for you to enjoy!


// Bootswatches
// --------------------------------------------------------------------------------------------------- //

	// Change the Swatch variable to a Bootswatch of your liking. The included swatches can be found in
	// the swatches direcotry. Swatches included: Cerulean, Journal, Simplex, Slate, Spacelab and United.
	// Remember to uncomment the two lines below the Swatch variable!
	
	@swatch: your-swatch;
	
	//@import "swatches/@{swatch}/variables";
	//@import "swatches/@{swatch}/bootswatch";
	

// Variables
// --------------------------------------------------------------------------------------------------- //


	// Global values
	// ----------------------------------------------------------------------------------------------- //
	
	
	// Grays
	// ----------------------------------------------------------------------------------------------- //
	
	@black:                 #000;
	@grayDarker:            #222;
	@grayDark:              #333;
	@gray:                  #555;
	@grayLight:             #999;
	@grayLighter:           #eee;
	@white:                 #fff;
	
	
	// Accent colors
	// ----------------------------------------------------------------------------------------------- //
	
	@blue:                  #049cdb;
	@blueDark:              #0064cd;
	@green:                 #46a546;
	@red:                   #9d261d;
	@yellow:                #ffc40d;
	@orange:                #f89406;
	@pink:                  #c3325f;
	@purple:                #7a43b6;
	
	
	// Scaffolding
	// ----------------------------------------------------------------------------------------------- //
	
	@bodyBackground:        @white;
	@textColor:             @grayDark;
	
	
	// Links
	// ----------------------------------------------------------------------------------------------- //
	
	@linkColor:             #08c;
	@linkColorHover:        darken(@linkColor, 15%);
	
	
	// Typography
	// ----------------------------------------------------------------------------------------------- //
	
	@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
	@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
	@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
	
	@baseFontSize:          14px;
	@baseFontFamily:        @sansFontFamily;
	@baseLineHeight:        20px;
	@altFontFamily:         @serifFontFamily;
	
	@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
	@headingsFontWeight:    bold;    // instead of browser default, bold
	@headingsColor:         inherit; // empty to use BS default, @textColor
	
	
	// Tables
	// ----------------------------------------------------------------------------------------------- //
	
	@tableBackground:                   transparent; // overall background-color
	@tableBackgroundAccent:             #f9f9f9; // for striping
	@tableBackgroundHover:              #f5f5f5; // for hover
	@tableBorder:                       #ddd; // table and cell border
	
	
	// Buttons
	// ----------------------------------------------------------------------------------------------- //
	
	@btnBackground:                     @white;
	@btnBackgroundHighlight:            darken(@white, 10%);
	@btnBorder:                         #bbb;
	
	@btnPrimaryBackground:              @linkColor;
	@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
	
	@btnInfoBackground:                 #5bc0de;
	@btnInfoBackgroundHighlight:        #2f96b4;
	
	@btnSuccessBackground:              #62c462;
	@btnSuccessBackgroundHighlight:     #51a351;
	
	@btnWarningBackground:              lighten(@orange, 15%);
	@btnWarningBackgroundHighlight:     @orange;
	
	@btnDangerBackground:               #ee5f5b;
	@btnDangerBackgroundHighlight:      #bd362f;
	
	@btnInverseBackground:              #444;
	@btnInverseBackgroundHighlight:     @grayDarker;
	
	
	// Forms
	// ----------------------------------------------------------------------------------------------- //
	
	@inputBackground:               @white;
	@inputBorder:                   #ccc;
	@inputBorderRadius:             3px;
	@inputDisabledBackground:       @grayLighter;
	@formActionsBackground:         #f5f5f5;
	
	// Dropdowns
	// ----------------------------------------------------------------------------------------------- //
	
	@dropdownBackground:            @white;
	@dropdownBorder:                rgba(0,0,0,.2);
	@dropdownDividerTop:            #e5e5e5;
	@dropdownDividerBottom:         @white;
	
	@dropdownLinkColor:             @grayDark;
	
	@dropdownLinkColorHover:        @white;
	@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
	
	@dropdownLinkColorActive:       @dropdownLinkColor;
	@dropdownLinkBackgroundActive:  @linkColor;



	// COMPONENT VARIABLES
	// ----------------------------------------------------------------------------------------------- //
	
	
	// Input placeholder text color
	// ----------------------------------------------------------------------------------------------- //
	
	@placeholderText:         @grayLight;
	
	
	// Hr border color
	// ----------------------------------------------------------------------------------------------- //
	
	@hrBorder:                @grayLighter;
	
	
	// Wells
	// ----------------------------------------------------------------------------------------------- //
	
	@wellBackground:                  #f5f5f5;
	
	
	// Navbar
	// ----------------------------------------------------------------------------------------------- //
	
	@navbarCollapseWidth:             979px;
	
	@navbarHeight:                    40px;
	@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
	@navbarBackgroundHighlight:       #ffffff;
	@navbarBorder:                    darken(@navbarBackground, 12%);
	
	@navbarText:                      @gray;
	@navbarLinkColor:                 @gray;
	@navbarLinkColorHover:            @grayDark;
	@navbarLinkColorActive:           @gray;
	@navbarLinkBackgroundHover:       transparent;
	@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);
	
	@navbarBrandColor:                @navbarLinkColor;
	
	// Inverted navbar
	// ----------------------------------------------------------------------------------------------- //
	
	@navbarInverseBackground:                #111111;
	@navbarInverseBackgroundHighlight:       #222222;
	@navbarInverseBorder:                    #252525;
	
	@navbarInverseText:                      @grayLight;
	@navbarInverseLinkColor:                 @grayLight;
	@navbarInverseLinkColorHover:            @white;
	@navbarInverseLinkColorActive:           @navbarInverseLinkColorHover;
	@navbarInverseLinkBackgroundHover:       transparent;
	@navbarInverseLinkBackgroundActive:      @navbarInverseBackground;
	
	@navbarInverseSearchBackground:          lighten(@navbarInverseBackground, 25%);
	@navbarInverseSearchBackgroundFocus:     @white;
	@navbarInverseSearchBorder:              @navbarInverseBackground;
	@navbarInverseSearchPlaceholderColor:    #ccc;
	
	@navbarInverseBrandColor:                @navbarInverseLinkColor;
	
	
	// Pagination
	// ----------------------------------------------------------------------------------------------- //
	
	@paginationBackground:                #fff;
	@paginationBorder:                    #ddd;
	@paginationActiveBackground:          #f5f5f5;
	
	
	// Hero unit
	// ----------------------------------------------------------------------------------------------- //
	
	@heroUnitBackground:              @grayLighter;
	@heroUnitHeadingColor:            inherit;
	@heroUnitLeadColor:               inherit;
	
	
	// Form states and alerts
	// ----------------------------------------------------------------------------------------------- //
	
	@warningText:             #c09853;
	@warningBackground:       #fcf8e3;
	
	@errorText:               #b94a48;
	@errorBackground:         #f2dede;
	
	@successText:             #468847;
	@successBackground:       #dff0d8;
	
	@infoText:                #3a87ad;
	@infoBackground:          #d9edf7;
	
	
	// Tooltips and popovers
	// ----------------------------------------------------------------------------------------------- //
	
	@tooltipColor:            #fff;
	@tooltipBackground:       #000;
	@tooltipArrowWidth:       5px;
	
	@popoverBackground:       #fff;
	@popoverArrowWidth:       10px;
	@popoverArrowColor:       #fff;
	
	
// Place all other styles here
// --------------------------------------------------------------------------------------------------- //

	// Your extra and/or styles
	
	